<template>
    <div>
        <el-container>
          <el-aside width="auto">
            <div class="aside_title" v-if="isCollapse == false" @click="openMenu(1)">悦来电后台管理</div>
            <div class="aside_title_icon" v-if="isCollapse == true" >
              <img @click="openMenu(0)" src="@/images/111 2@2x.png" alt="">
            </div>
            <el-menu router unique-opened text-color="#949BBE" :default-active="$route.path" active-text-color="#165BFF" class="el-menu-vertical-demo" @open="handleOpen" @close="handleClose" :collapse="isCollapse">
              <span :index="item.id" v-for="(item, i) in menu" :key="i">
                <span v-if="item.state == 0">
                  <el-menu-item :index="item.path">
                    <i style="font-weight: 500" :class="[item.flag ? item.trueflag : item.falseflag,item.letclass]"></i>&emsp13;
                    <span slot="title">{{item.name}}</span>
                  </el-menu-item>
                </span>
                <span v-else>
                  <el-submenu :index="item.id" :key="i">
                    <template slot="title">
                      <i style="color: #949BBE;" :class="[item.flag ? item.trueflag : item.falseflag,item.letclass]"></i>&emsp13;
                      <span>{{ item.name }}</span>
                    </template>
                  <div v-if="item.children">
                        <span v-for="(items,index) in item.children" :key="index">
                            <span v-if="items.state == 3">
                                <el-submenu :index="items.id" :key="i"> 
                                    <template slot="title">
                                        <span>{{ items.text }}</span>
                                    </template>
                                    <el-menu-item 
                                    v-for="(itemss,indexs) in items.children"
                                    :key="indexs"
                                    :index="itemss.path">
                                      {{ itemss.text }}
                                    </el-menu-item>
                                </el-submenu>
                            </span>
                          <span v-else>
                              <el-menu-item 
                              :key="index"
                              :index="items.path">
                                {{ items.text }}
                              </el-menu-item>
                          </span>
                        </span>
                </div>
                </el-submenu>
                </span>
              </span>

            </el-menu>
          </el-aside>
          <el-container>
            <el-header>
              <div class="userInfo">
                <el-dropdown  @command="handleCommand" trigger="click">
                  <span class="el-dropdown-link">
                    <img src="@/images/111 2@2x.png"> 用户名<i class="el-icon-arrow-down el-icon--right"></i>
                  </span>
                  <el-dropdown-menu slot="dropdown">
                    <el-dropdown-item icon="el-icon-user">个人中心</el-dropdown-item>
                    <el-dropdown-item icon="el-icon-switch-button">退出登录</el-dropdown-item>
                  </el-dropdown-menu>
                </el-dropdown>
              </div>
            </el-header>
            <el-main>
            <el-breadcrumb separator="/">
                <el-breadcrumb-item :to="item.path" v-for="(item, index) in breadcrumbList" :key="index">{{ item.title }}</el-breadcrumb-item>
            </el-breadcrumb>
              <div class="card">
                <router-view></router-view>
              </div>
            </el-main>
          </el-container>
        </el-container>
      </div>
    </template>
<script>
import router from '@/router/index'
import { removeToken } from '../utils/token.js'
import api from '../api/jur.js'
var main
    export default {
        data() {
            return {
              isCollapse: true,
              menuList:[],
              breadlitst:[],
              breadcrumbList:[],
              menu:[
                   {
                        name: "首页",
                        id: "1",
                        url:require("@/images/home/homePage.png"),
                        path:"/home",
                        state:0,
                        flag:false, //控制显示和隐藏
                        falseflag:'icon-shouye', //将iconfont获得的类名 存为变量
                        letclass:'iconfont' // 这个是 iconfont 类名的主类
                    },
                  {
                    name: "充电站管理",
                    id: "2",
                    url:require("@/images/home/gunPage.png"),
                    children: [
                      { text: "充电站管理", path: "/gasStations",meta:{title:"充电站管理"} ,id:'2-1'},
                      { text: "充电桩管理", path: "/ChargingPile" ,id:'2-2'},
                      { text: "充电枪管理", path: "/ChargingGun" },
                      { text: "地锁管理", path: "/groundLock" },
                      // { text: "停车位管理", path: "/parkingSpace" },
                      { text: "费用规则", path: "/feeRules" },
                    ],
                      flag:false, //控制显示和隐藏
                      falseflag:'icon-qichexiangguan-chongdianzhan', //将iconfont获得的类名 存为变量
                      letclass:'iconfont' // 这个是 iconfont 类名的主类
                  },
                    {
                        name: "用户管理",
                        id: "3",
                        url:require("@/images/home/peopleSet.png"),
                        path:"/userList",
                        state:0,
                        flag:false, //控制显示和隐藏
                        falseflag:'icon-yonghuguanli', //将iconfont获得的类名 存为变量
                        letclass:'iconfont' // 这个是 iconfont 类名的主类
                    },
                  {
                    name: "订单管理",
                    id: "4",
                    url:require("@/images/home/note.png"),
                    children: [
                      {
                        text: "充电订单",
                        path: "/charging",
                      },
                      {
                        text: "占位订单",
                        path: "/placeholder",
                      },
                      {
                        text: "退款记录",
                        path: "/drawback",
                      },
                    ],
                    flag:false, //控制显示和隐藏
                    falseflag:'icon-dingdanguanli', //将iconfont获得的类名 存为变量
                    letclass:'iconfont' // 这个是 iconfont 类名的主类
                  },
                  {
                    name: "资产管理",
                    id: "5",
                    url:require("@/images/home/coin.png"),
                    children: [
                      {
                        text: "充值记录",
                        path: "/recharge",
                      },
                      {
                        text: "提现记录",
                        path: "/withdraw",
                      },
                    ],
                    flag:false, //控制显示和隐藏
                    falseflag:'icon-zichanguanli', //将iconfont获得的类名 存为变量
                    letclass:'iconfont' // 这个是 iconfont 类名的主类
                  },
                  {
                    name: "运营监测",
                    id: "6",
                    url:require("@/images/home/computershu.png"),
                    children: [
                      {
                        text: "告警中心",
                        path: "/alarmCenter",
                      },
                      {
                        text: "故障报修",
                        path: "/troubleshooting",
                      }
                    ],
                    flag:false, //控制显示和隐藏
                    falseflag:'icon-yunyingguanli', //将iconfont获得的类名 存为变量
                    letclass:'iconfont' // 这个是 iconfont 类名的主类
                  },
                  {
                    name: "运营管理",
                    id: "7",
                    url:require("@/images/home/computer.png"),
                    children: [
                      {
                        text: "banner管理",
                        path: "/bannerManage",
                      },
                      {
                        text: "帮助中心",
                        path: "/helpCenter",
                      },
                    ],
                   
                    flag:false, //控制显示和隐藏
                    falseflag:'icon-kechengshipin', //将iconfont获得的类名 存为变量
                    letclass:'iconfont' // 这个是 iconfont 类名的主类
                  },
                  {
                    name: "营销管理",
                    id: "8",
                    url:require("@/images/home/market.png"),
                    children: [
                      {
                        text: "优惠券管理",
                        path: "/couponManage",
                      }
                    ],
                    flag:false, //控制显示和隐藏
                    falseflag:'icon-yingxiaoguanli', //将iconfont获得的类名 存为变量
                    letclass:'iconfont' // 这个是 iconfont 类名的主类
                  },
                  {
                    name: "系统设置",
                    id: "9",
                    url:require("@/images/home/setting.png"),
                    children: [
                      {
                        text: "部门管理",
                        path: "/departmentManage",
                      },
                      {
                        text: "角色管理",
                        path: "/roleManage",
                      },
                      {
                        text: "账号管理",
                        path: "/accountSetting",
                      },
                      {
                        text: "日志管理",
                        path: "/logManage",
                        state:3,
                        children:[
                          {
                            text: "登录日志",
                            path: "/loginManage",
                          },                   
                          {
                            text: "操作日志",
                            path: "/OperateManage",
                          },
                        ] 
                      },
                      {
                        text: "基本设置",
                        path: "/basicSettings",
                      },
                      {
                        text: "个人信息",
                        path: "/personalInformation",
                      }
                    ],
                    flag:false, //控制显示和隐藏
                    falseflag:'icon-xitongshezhi', //将iconfont获得的类名 存为变量
                    letclass:'iconfont' // 这个是 iconfont 类名的主类
                  },
                ]
              }
        },
        watch:{
          $route(){
            this.generateBreadcrumb()
          }
        },
        created () {
          main = this
          console.log('路由列表',router)
        },
        mounted() {
          this.generateBreadcrumb()
          this.resizeHandler()
        },
        methods: {
          handleCommand(){
            console.log(1111)
            api.logout().then(res=>{
              console.log('退出',res)
              if(res.data.code == 200){
                removeToken('token')
                this.$router.push('/login')
                this.$message.success(`${res.data.msg}`)
              } else if (res.data.code == 404){
                this.$message.warning(`${res.data.msg}`)
                this.$router.push('/login')
              }
            })
          },
          resizeHandler() {
              if (window.innerWidth <= 768) {
                main.isCollapse = true
              } else {
                main.isCollapse = false
              }
              window.onresize = function () {
                if (window.innerWidth <= 768) {
                  main.isCollapse = true
                } else {
                  main.isCollapse = false
                }
              }
          },

          generateBreadcrumb() {
              const matched = this.$route.matched
              console.log('$route.matched',this.$route.matched)
              const breadcrumbList = []

              matched.forEach(item => {
                const { meta, name, path } = item
                const title = item.meta.title
                console.log('题目',title)
                if (title) {
                  breadcrumbList.push({
                    title,
                    path
                  })
                }
              })
              console.log('路由列表',breadcrumbList)
              this.breadcrumbList = breadcrumbList
          },
          chanche(path){
            this.$router.push(path)
            // console.log(path)
          },
          openMenu(a){
            if(a == 1){
              this.isCollapse = true
            }else{
              this.isCollapse = false
            }
          },
          handleOpen(key, keyPath) {
            // console.log(key, keyPath);
          },
          handleClose(key, keyPath) {
            // console.log(key, keyPath);
          },
        },
    }
</script>

<style>  
  .el-menu--collapse  .el-submenu__title span{
    display: none;
  }

  .el-menu--collapse  .el-submenu__title .el-submenu__icon-arrow{
    display: none;
  }
</style>

<style lang="less" scoped>
  .el-header{
    background-color: #ffffff;
    color: #333;
    text-align: center;
    line-height: 59.99px;
  }
  
  .el-aside {
    background-color: #ffffff;
    height: 100vh;
    color: #333;
    font-size: 16.03px;
    text-align: left;
    scroll-view ::-webkit-scrollbar {
    display: none !important;
    width: 0 !important;

    height: 0 !important;

    -webkit-appearance: none;

    background: transparent;

}
  }
  .aside_title{
    height: 59.99px;
    padding-left: 49.98px;
    padding-right: 38.01px;
    border-bottom: .98px solid #F1F1F1;
    font-size: 16.03px;
    font-family: PingFang SC-Semibold, PingFang SC;
    font-weight: 600;
    color: #000000;
    line-height: 59.99px;
    cursor: pointer;
  }
  .aside_title_icon{
    text-align: center;
    height: 59.99px;
    // width: 73.99px;
    line-height: 59.99px;
    border-bottom: .98px solid #F1F1F1;
    font-family: PingFang SC-Semibold, PingFang SC;
    line-height: 24.01px;
  }
  .aside_title_icon img{
    margin-top: 17.99px;
    cursor: pointer;
    width: 24.01px;
    height: 24.01px;
  }
  .el-main {
    background-color: #fbfcfe;
    color: #333;
    height: calc(100vh - 59.99px);
    text-align: center;
    font-size: 14px !important;
  }
  .userInfo{
    width: 119.98px;
    height: 31.99px;
    float: right;
    margin-top: 14px;
    cursor: pointer;
  }
  .userInfo>.head_url{
    overflow: hidden;
    float: left;
    width: 31.99px;
    height: 31.99px;
    border-radius: 31.99px;
    line-height: 31.99px;
  }
  .userInfo>.head_url img{
    width:31.99px;
    height:31.99px;
  }
  .userInfo .nickname{
    margin-left: 7.98px;
    float: left;
    height: 31.99px;
    line-height: 31.99px;
    font-size: 14px !important;
    font-family: PingFang SC-Medium, PingFang SC;
    font-weight: 500;
    color: #000000;
  }
  .el-menu-vertical-demo:not(.el-menu--collapse) {
    width: 199.99px;
    min-height: 399.98px;
  }
  .asideIcon{
    width: 14.98px;
    height: 14.98px;
    margin-right: 7.98px;
  }
  .el-aside::-webkit-scrollbar {
  display: none;
}
.el-dropdown{
  height: 59.99px;
  line-height: 59.99px;
  margin-top: -30.03px;
  transform: translate(0,-13.02px);
}
.el-dropdown img{
  width: 31.99px;
  height: 31.99px;
  border-radius: 31.99px;
  vertical-align: middle;
}
.card{
  background: white;
  padding: 16.03px;
}

/deep/.el-input__inner {
  background-color: #F0F1F6 !important;
  outline: none;
  border: 0px;
}
.el-breadcrumb{
  margin-bottom: 20.02px;
}
.el-input{
  margin-top: 10px;
  margin-bottom: 10px;
}
// 修改input——placeholder
/deep/ .el-input__inner::placeholder {
  font-size: 12px;
    font-family: PingFang SC-Regular, PingFang SC;
    font-weight: 400;
    color: #666666;
      }
</style>